<template>
  <view>
    <custom-head-top>
      <template #left>分类管理</template>
      <template #right>
        <button type="primary" size="mini" @click="handleAdd">
          <uni-icons type="plusempty" size="14" color="#fff"></uni-icons>
          新增分类
        </button>
        <button
          type="warn"
          size="mini"
          @click="handleDelete(ids)"
          :disabled="ids.length == 0"
        >
          <uni-icons
            type="trash"
            size="14"
            :color="ids.length == 0 ? 'rgba(255,255,255,0.6)' : '#fff'"
          ></uni-icons>
          批量删除
        </button>
      </template>
    </custom-head-top>
    <view class="main">
      <uni-table
        border
        stripe
        emptyText="暂无更多数据"
        type="selection"
        @selection-change="selectChange"
        ref="tableRef"
      >
        <!-- 表头行 -->
        <uni-tr>
          <uni-th align="left" width="150">缩略图</uni-th>
          <uni-th align="left">分类名称</uni-th>
          <uni-th align="left" width="80">排序</uni-th>
          <uni-th align="left" width="100">是否推荐</uni-th>
          <uni-th align="left" width="80">是否启用</uni-th>
          <uni-th align="left" width="200">操作</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="item in classifyList" :key="item._id">
          <uni-td>
            <image
              class="thumb"
              :src="getSmallImage(item.picurl)"
              mode="aspectFill"
            ></image>
          </uni-td>
          <uni-td>{{ item.name }}</uni-td>
          <uni-td>{{ item.sort }}</uni-td>
          <uni-td>
            <uni-tag
              :inverted="true"
              text="推荐"
              type="error"
              v-if="item.select"
            />
            <uni-tag :inverted="true" text="普通" v-else />
          </uni-td>
          <uni-td>
            <switch
              class="switch-btn"
              :checked="item.enable"
              @change="handleEnableChange($event, item._id)"
          /></uni-td>
          <uni-td>
            <view class="operate-btn">
              <button type="primary" size="mini" plain @click="handleEdit(item)">修改</button>
              <button
                type="warn"
                size="mini"
                plain
                @click="handleDelete([item._id])"
              >
                删除
              </button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <view class="pagination">
      <!-- <uni-pagination
        title="标题文字"
        show-icon="true"
        total="50"
        current="2"
      ></uni-pagination> -->
    </view>
    <classifyPopup ref="popupRef2" @init="getClassifyList" :type="type" :maxSort="classifyList[classifyList.length - 1]?.sort" />
  </view>
</template>

<script setup>
import customHeadTop from '@/components/cunstom-head-top/custom-head-top.vue';
import classifyPopup from './children/classifyPopup.vue';
import { ref,nextTick } from 'vue';
import { showToast, showModal } from '@/utils/common';
import { getSmallImage } from '@/utils/tools';

const classifyCloudObj = uniCloud.importObject('admin-bizhi-classify', {
  customUI: true,
});
const tableRef = ref(null);

const popupRef2 = ref(null);
const handleAdd = () => {
  type.value = 'add';
  console.log("🌺 ~ handleAdd ~ type.value:🌳", type.value)
  nextTick(() => {
    popupRef2.value.open(); 
  });
};
const classifyList = ref([]);
const getClassifyList = async () => {
  const res = await classifyCloudObj.list();
  console.log('👿 ~ getClassifyList ~ res:', res);

  if (res.errCode == 0) {
    classifyList.value = res.data;
  } else {
    showToast({
      title: res.errMsg,
    });
  }
};
getClassifyList();

const handleDelete = async (id) => {
  if (id.length == 0) {
    showToast({
      title: '请选择要删除的分类',
    });
    return;
  }
  const res = await showModal({
    content: '确定删除该分类吗？',
  });

  if (res === 'confirm') {
    const res = await classifyCloudObj.remove(id);
    if (res.errCode == 0) {
      showToast({
        title: '删除成功',
      });
      tableRef.value.clearSelection();
      ids.value = [];
      setTimeout(() => {
        getClassifyList();
      }, 1000);
    } else {
      showToast({
        title: res.errMsg,
      });
    }
  }
};
const ids = ref([]);
const selectChange = (e) => {
  ids.value = e.detail.index.map((i) => {
    return classifyList.value[i]._id;
  });
};
const type = ref('add');
const handleEdit = (item) => {
  type.value = 'edit';
  nextTick(() => {  
    popupRef2.value.open(item);
  });
};
const handleEnableChange = async (e, _id) => {
  const res = await classifyCloudObj.update({
    _id,
    enable: e.detail.value,
  });
  if (res.errCode == 0) {
    showToast({
      title: '修改成功',
    });
    getClassifyList();
  }else{
    showToast({
      title: res.errMsg,
    });
  }
};
</script>

<style lang="less" scoped>
.main {
  padding: 20px;
  .thumb {
    width: 45px;
    height: 90px;
    border-radius: 3px;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.pagination {
  padding: 20px 0 40px;
}
</style>
